﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百度一下，你就知道</title>
<link rel="stylesheet" href="css/common.css"/>
<link rel="shortcut icon" href="images/Baidu.ico" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
	#wimoban_p,#wimoban_p a
	{
		color:#fff;
		font-family:"微软雅黑";
	}
#wimoban_p{
	text-align:center;
	font-size:14px;
	clear:both;
}
</style>
</head>	
<body>
<div id="wrapper">
	<div class="skinBg" style="background-image: url('images/bg.jpg');"></div>
	<header id="header">
		<div class="weather fl">
			<span class="cityW">
				<span>福州：</span>
				<span>
					<span class="weatherIcon wI1"></span>
					<span>23 ~ 31℃</span>
				</span>
			</span>
			<span class="sp">|</span>
			<span class="pollution">
				<span>空气质量：83</span>
				<span class="polutionLevel">良</span>
			</span>
			<div class="cityWeather">
				
			</div>
		</div>
		<nav class="headNavs fr tr">
			<a href="#"><span class="s-icon s-icon-treasure"></span><span>宝箱</span></a>
			<a href="#"><span class="s-icon s-icon-skin"></span><span>换肤</span></a>
			<a href="#"><span class="s-icon s-icon-msg"></span><span>消息</span></a>
			<a><span class="s-icon s-icon-line"></span></a>
			<a href="#"><span>设为首页</span></a>
			<a href="javascript:;" class="uname"><span>设置</span><span class="user-arrow"></span></a>
			<div class="topMenus dn">
				<span class="arrowTop"></span>
				<a href="#">个人中心</a>
				<a href="#">帐号设置</a>
				<a href="#">搜索设置</a>
				<a href="#">意见反馈</a>
				<a href="#">首页教程</a>
				<a href="#">安全退出</a>
			</div>
		</nav>
	</header>
	<div class="content tc">
		<p class="logo"><img width="270" height="129" src="images/logo_white.png" alt="logo" /></p>
		<nav class="mainNavs">
			<a href="#">新闻</a>
			<a href="#">网页</a>
			<a href="#">贴吧</a>
			<a href="#">知道</a>
			<a href="#">音乐</a>
			<a href="#">图片</a>
			<a href="#">视频</a>
			<a href="#">地图</a>
			<a href="#">百科</a>
			<a href="#">文库</a>
			<a href="#">更多&gt;&gt;</a>
		</nav>
		<div class="searchBox">
			<form action="">
				<input type="text" class="searchIpt f14" name="wd" maxlength="100" autocomplete="off"/>
				<input type="submit" class="btn cp" value="百度一下" />
			</form>
		</div>
		<div class="mainContents oh">
			<div class="menusWrapper fl">
				<a class="active" href="javascript:;">导航</a>
				<a href="javascript:;">新闻</a>
				<a href="javascript:;">视频</a>
				<a href="javascript:;">音乐</a>
				<a href="javascript:;">团购</a>
			</div>
			<div class="ctnerWrapper">
				<div class="ctnerBox">
					<div id="cbox-1" class="cbox tl dn">
						<div class="ctnerTab pr tc">
							<a href="#">我的导航</a> <a href="#" class="on">推荐导航</a>
						</div>
						<div class="myNavs rtNavs dn pt15">
							<div class="navTitle fl">我的导航</div>
							<div class="navArea oh">
								<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/101.png" alt="" /></a>
							</div>
						</div>
						<div class="hotNavs rtNavs dn oh pt15">
							<div class="navTitle fl">热门网址</div>
							<div class="navArea oh">
								<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/101.png" alt="" /></a>
								<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/102.png" alt="" /></a>
								<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/103.png" alt="" /></a>
								<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/104.png" alt="" /></a>
								<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/20.png" alt="" /></a>
								<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/106.png" alt="" /></a>
								<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/107.png" alt="" /></a>
								<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/108.png" alt="" /></a>
								<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/109.png" alt="" /></a>
								<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/110.png" alt="" /></a>
								<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/111.png" alt="" /></a>
								<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/112.png" alt="" /></a>
								<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/113.png" alt="" /></a>
								<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/114.png" alt="" /></a>
								<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/115.png" alt="" /></a>
								<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/116.png" alt="" /></a>
								<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/12.png" alt="" /></a>
								<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/117.png" alt="" /></a>
							</div>
						</div>
					</div>
					<div id="cbox-2" class="cbox tl dn">
						<div class="newsBox oh">
							<div class="sliderBox fl">
								<div class="slider">
									<a href="#" target="_blank" class="picLink active">
										<img width="425" height="260" src="images/news1.jpg" alt="" />
										<span  class="picTitle">新闻标题1</span>
									</a>
									<a href="#" target="_blank" class="picLink">
										<img width="425" height="260" src="images/news2.jpg" alt="" />
										<span  class="picTitle">新闻标题2</span>
									</a>
									<a href="#" target="_blank" class="picLink">
										<img width="425" height="260" src="images/news3.jpg" alt="" />
										<span  class="picTitle">新闻标题3</span>
									</a>
									<a href="#" target="_blank" class="picLink">
										<img width="425" height="260" src="images/news4.jpg" alt="" />
										<span  class="picTitle">新闻标题4</span>
									</a>
									<a href="#" target="_blank" class="picLink">
										<img width="425" height="260" src="images/news5.jpg" alt="" />
										<span  class="picTitle">新闻标题5</span>
									</a>
								</div>
								<div class="smallPics">
									<a class="active"><img width="68px" height="40px" src="images/news1.jpg" alt="" /></a>
									<a><img width="68px" height="40px" src="images/news2.jpg" alt="" /></a>
									<a><img width="68px" height="40px" src="images/news3.jpg" alt="" /></a>
									<a><img width="68px" height="40px" src="images/news4.jpg" alt="" /></a>
									<a><img width="68px" height="40px" src="images/news5.jpg" alt="" /></a>
								</div>
							</div>
							<div class="topic">
								<div class="topicTop">
									<span class="titleWords titleT on"><a href="javascript:;">搜索风云榜</a></span>
									<span class="titleTopic titleT"><a href="javascript:;">热门话题</a></span>
									<a class="changeWords" href="javascript:;">换一换</a>
								</div>
								<div class="topicList">
									<div class="wBox topicB dn">
										<ul>
											<li><a target="_blank" href="#">宋仲基宋慧乔婚讯</a></li>
											<li><a target="_blank" href="#">橘子洲被洪水贯穿</a></li>
											<li><a target="_blank" href="#">台茶叶蛋教授演讲</a></li>
											<li><a target="_blank" href="#">王者荣耀乱象</a></li>
											<li><a target="_blank" href="#">留学生吸笑气成瘾...</a></li>
											<li><a target="_blank" href="#">男子半夜被人摸手</a></li>
											<li><a target="_blank" href="#">被同学暴打拍裸照</a></li>
											<li><a target="_blank" href="#">章莹颖案告破</a></li>
											<li><a target="_blank" href="#">合肥房价过山车</a></li>
											<li><a target="_blank" href="#">张若昀化蹦极少年</a></li>
											<li><a target="_blank" href="#">又一共享单车倒闭</a></li>
											<li><a target="_blank" href="#">高中生跳楼被踹回</a></li>
											<li><a target="_blank" href="#">网友骗女子425万</a></li>
											<li><a target="_blank" href="#">暴雨孩子塞买菜车</a></li>
											<li><a target="_blank" href="#">63套房离婚协议</a></li>
											<li><a target="_blank" href="#">男子咖啡临摹名画</a></li>
										</ul>
									</div>
									<div class="tBox topicB dn">
										<ul>
											<li><a target="_blank" href="#">话题11111</a></li>
											<li><a target="_blank" href="#">话题22222</a></li>
											<li><a target="_blank" href="#">话题33333</a></li>
											<li><a target="_blank" href="#">话题44444</a></li>
											<li><a target="_blank" href="#">话题55555</a></li>
											<li><a target="_blank" href="#">话题66666</a></li>
											<li><a target="_blank" href="#">话题77777</a></li>
											<li><a target="_blank" href="#">话题88888</a></li>
											<li><a target="_blank" href="#">话题99999</a></li>
											<li><a target="_blank" href="#">话题11111</a></li>
											<li><a target="_blank" href="#">话题22222</a></li>
											<li><a target="_blank" href="#">话题33333</a></li>
											<li><a target="_blank" href="#">话题44444</a></li>
											<li><a target="_blank" href="#">话题55555</a></li>
											<li><a target="_blank" href="#">话题66666</a></li>
											<li><a target="_blank" href="#">话题77777</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="cbox-3" class="cbox tl dn">
						<p class="pt15 tc f14">4就这样吧。。。。。。。</p>
					</div>
					<div id="cbox-4" class="cbox tl dn">
						<p class="pt15 tc f14">5就这样吧。。。。。。。</p>
					</div>
					<div id="cbox-5" class="cbox tl dn">
						<p class="pt15 tc f14">6就这样吧。。。。。。。</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer id="footer" class="tc">©2017 Baidu 使用百度前必读 京ICP证030173号</footer>
</div>
<script type="text/javascript"  src="js/jquery.autocomplete.min.js"></script>
<script type="text/javascript" >
	$('.uname,.topMenus').hover(function(){
		$('.topMenus').stop(true,true).fadeIn(200);
	},function(){
		$('.topMenus').stop(true,true).delay(500).fadeOut(200);
	});
	
	//搜索框自动补全; 
	$('.searchIpt').AutoComplete({
		'data': ['百度', '百度一下，你就知道', 'abcdefg', '前端', '前端开发', 'Three', 'Four', 'Five', 'Six','smwell.com', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
		'itemHeight': 24,
		'width': 529
	}).AutoComplete('show');
		
	$('.ctnerTab a').click(function(){
		if(!$(this).hasClass('on')){
			$('.ctnerTab a').removeClass('on').eq($(this).index()).addClass('on');
			$('.rtNavs').stop(true,true).hide(200).eq($(this).index()).show(300);
		}
	});
	
	$('.menusWrapper a').click(function(){
		if(!$(this).hasClass('active')){
			$('.menusWrapper a').removeClass('active').eq($(this).index()).addClass('active');
			$('.cbox').stop(true,true).animate({top:318},100).hide().eq($(this).index()).animate({top:0},400).show();
		}
	});
	
	$('.smallPics a').click(function(){
		if(!$(this).hasClass('active')){
			$('.smallPics a').removeClass('active').eq($(this).index()).addClass('active');
			$('.picLink').stop(true,true).removeClass('active').eq($(this).index()).addClass('active');
		}
	});
			
	$('.titleT').hover(function(){
		if(!$(this).hasClass('on')){
			$('.titleT').removeClass('on').eq($(this).index()).addClass('on');
			$('.topicB').stop(true,true).hide().eq($(this).index()).show();
		}
	});
</script>
</body>
</html>